.switch {
  @apply w-9 relative inline-block h-5 leading-5 cursor-pointer;
  border-radius: 20px;
  transition: all 0.3s;

  &:after {
    @apply absolute w-4 h-4 rounded-2xl bg-white top-2/4;
    content: '';
    transform: translateY(-50%);
    left: 1px;
    transition: all 0.3s;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  }

  &.disabled {
    cursor: not-allowed;
  }
}

.checks {
  @apply hidden;
  &:checked + .switch:after {
    transform: translate(18px, -50%);
  }
}
